<template>
  <el-dialog
    class="mypaymentdailog"
    top="3vh"
    :title="operateType.dialogTitle"
    lock-scroll
    v-model="dialogVisable"
    width="1300px"
  >
    <el-scrollbar height="calc(100vh - 180px)" :always="true" :native="true">
      <el-row class="bg-full">
        <el-col :span="layout.left">
          <el-card shadow="never" class="bg-full">
            <div class="product-box">
              <el-image
                v-if="queryParams.entry.image"
                :src="queryParams.entry.image"
                class="img-60"
                width="60"
                height="40"
              ></el-image>
              <el-image v-else :src="$require('empty/noimage40.png')" class="img-60" width="60" height="40"></el-image>
              <div>
                <p class="name">{{ queryParams.entry.mname }}</p>
                <p class="sku">{{ queryParams.entry.sku }}</p>
              </div>
            </div>
            <div class="flex-center-between">
              <el-space :spacer="spacer">
                <span v-if="recMap.entry.amount >= recMap.entry.totalin"
                  ><span class="font-bold">{{ recMap.entry.amount - recMap.entry.totalin }}</span>
                  <p class="font-extraSmall">待收货</p></span
                >
                <span v-else
                  ><span style="color: #ff0f47">已超收{{ recMap.entry.totalin - recMap.entry.amount }}</span>
                  <p class="font-extraSmall">待收货</p></span
                >
                <span
                  ><span class="font-bold">{{ recMap.entry.totalin }}</span>
                  <p class="font-extraSmall">已收货</p></span
                >
                <span
                  ><span class="font-bold">{{ recMap.weight }}kg</span>
                  <p class="font-extraSmall">预估重</p></span
                >
              </el-space>
              <el-progress
                type="dashboard"
                :width="120"
                :percentage="myformatFloat((recMap.entry.totalin / recMap.entry.amount) * 100)"
              >
                <template #default="{ percentage }">
                  <span class="font-bold">{{ percentage }}%</span>
                  <p class="font-extraSmall m-t-8">收货进度</p>
                </template>
              </el-progress>
            </div>
            <el-form label-width="100px">
              <el-form-item :label="operateType.warehouseType">
                <Warehouse
                  ref="warehouseRef"
                  @changeware="getWarehouse"
                  :defaultid="warehouseid"
                  warehouseType="self_usable"
                  defaultValue="only"
                />
              </el-form-item>
              <el-form-item :label="operateType.tabsType + '数量'">
                <el-input v-model="formData.amount" @input="formData.amount = CheckInputInt(formData.amount)">
                </el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="formData.remark" :rows="2" type="textarea"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" v-if="queryParams.entry.inwhstatus == 0" @click.stop="receive"
                  >提交{{ operateType.tabsType }}</el-button
                >
                <el-button type="primary" v-if="queryParams.entry.inwhstatus == 1" disabled
                  >提交{{ operateType.tabsType }}</el-button
                >
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
        <!-- v-if="operateType.tabsType=='收货'" -->
        <!-- 到货记录 -->

        <el-col :span="layout.mid">
          <el-card shadow="never" class="bg-full">
            <LogisticsRecord ref="logisticsRef" @change="handleHasLogisticsRecord" />
          </el-card>
        </el-col>
        <el-col :span="layout.right" class="record-box">
          <!-- 物流信息 -->
          <ArrivalRecord @change="changeDelete" ref="arrRecordRef" />
        </el-col>
      </el-row>
    </el-scrollbar>
    <template #footer>
      <el-button @click="dialogVisable = false">关闭</el-button>
      <el-button type="primary" v-if="queryParams.entry.inwhstatus == 0" @click="stopReceive" plain>结束收货</el-button>
      <el-button type="primary" v-if="queryParams.entry.inwhstatus == 1" @click="startReceive" plain
        >继续收货</el-button
      >
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import ArrivalRecord from './ArrivalRecord.vue';
import LogisticsRecord from './LogisticsRecord.vue';
// import purchaselistApi from '@/api/erp/purchase/form/listApi.js';
import Warehouse from './header/Warehouse.vue';
import { CheckInputInt, formatFloat } from '@/utils/index.js';
import { ElDivider, ElMessage, ElMessageBox } from 'element-plus';
import { h, ref, reactive, onMounted, watch, inject, toRefs, nextTick } from 'vue';

const emit = defineEmits(['change']);
const spacer = h(ElDivider, { direction: 'vertical' });
const warehouseRef = ref();
const arrRecordRef = ref();
const logisticsRef = ref();
const state = reactive({
  operateType: {
    dialogTitle: '',
    warehouseType: '',
    tabsType: ''
  },
  dialogVisable: false,
  activeName: '1',
  layout: { left: 7, mid: 12, right: 5 },
  // 查询参数
  queryParams: {
    entry: { totalin: 0 }
  },
  formData: {
    amount: '',
    remark: ''
  },
  warehouseid: null,
  recMap: {
    entry: {}
  }
});
const { activeName, dialogVisable, queryParams, operateType, layout, formData, logisticsData, recMap, warehouseid } =
  toRefs(state);
function myformatFloat(value) {
  if (value) {
    return formatFloat(value);
  } else {
    return 0;
  }
}
function handleHasLogisticsRecord(hasdata) {
  if (hasdata) {
    state.layout = { left: 7, mid: 12, right: 5 };
  } else {
    state.layout = { left: 10, mid: 7, right: 7 };
  }
}
function loadDetail() {
  // purchaselistApi.getRecdetail({ 'id': state.queryParams.entry.id, 'ftype': 'rec', 'actiontype': 'all' }).then((res) => {
  //   if (res.data) {
  //     state.recMap = res.data;
  //     state.queryParams.entry.totalin = res.data.entry.totalin;
  //     state.queryParams.entry.inwhstatus = res.data.entry.inwhstatus;
  //     state.queryParams.entry.auditstatus = res.data.entry.auditstatus;

  //     nextTick(() => {
  //       arrRecordRef.value.show(state.queryParams.entry, res.data.receivelist);
  //     });
  //   }
  // });
  nextTick(() => {
    logisticsRef.value.show(state.queryParams.entry.id);
  });
}
function receive() {
  if (state.queryParams.entry.inwhstatus == 1) {
    ElMessage.error('当前收货状态已完结！');
    return;
  }
  const data = {};
  data.recid = null;
  data.remark = state.formData.remark;
  data.amount = state.formData.amount;
  data.warehouseid = state.warehouseid;
  data.status = '0';
  data.entryid = state.queryParams.entry.id;
  if (state.operateType.tabsType == '收货') {
    data.ftype = 'in';
  } else if (state.operateType.tabsType == '退货') {
    data.ftype = 'out';
  }
  if (
    state.formData.amount == null ||
    state.formData.amount == undefined ||
    state.formData.amount == '' ||
    parseFloat(state.formData.amount) <= 0
  ) {
    ElMessage.error('操作数量不能小于等于0！');
    return;
  }

  if (data.ftype == 'out') {
    if (state.recMap.entry.totalin < state.formData.amount) {
      ElMessage.error('当前退货数量大于已经入库数量,不能继续操作！');
      return;
    }
  }
  let needconfirm = false;
  if (data.ftype == 'in') {
    let total = 0;
    total = total + (state.recMap.entry.totalin ? parseInt(state.recMap.entry.totalin) : 0);
    total = total + (state.recMap.entry.amount ? parseInt(state.formData.amount) : 0);
    if (total > parseInt(state.queryParams.entry.amount)) {
      needconfirm = true;
    }
  }
  if (needconfirm) {
    ElMessageBox.confirm('当前收货数量大于采购数量，请确认是否继续入库？', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      callback: (action) => {
        if (action == 'confirm') {
          // purchaselistApi.receive(data).then((res) => {
          //   if (res.data) {
          //     ElMessage.success('收货成功');
          //     state.recMap = res.data;
          //     nextTick(() => {
          //       arrRecordRef.value.show(state.queryParams.entry, res.data.receivelist);
          //     });
          //     state.queryParams.entry.totalin = res.data.entry.totalin;
          //     state.queryParams.entry.inwhstatus = res.data.entry.inwhstatus;
          //     state.queryParams.entry.auditstatus = res.data.entry.auditstatus;
          //     emit('change');
          //     state.activeName = '2';
          //   }
          // });
        }
      }
    });
  } else {
    // purchaselistApi.receive(data).then((res) => {
    //   if (res.data) {
    //     ElMessage.success('收货成功');
    //     state.recMap = res.data;
    //     nextTick(() => {
    //       arrRecordRef.value.show(state.queryParams.entry, res.data.receivelist);
    //     });
    //     state.queryParams.entry.totalin = res.data.entry.totalin;
    //     state.queryParams.entry.inwhstatus = res.data.entry.inwhstatus;
    //     state.queryParams.entry.auditstatus = res.data.entry.auditstatus;
    //     emit('change');
    //     state.activeName = '2';
    //   }
    // });
  }
}
function getWarehouse(val) {
  state.warehouseid = val;
}
function show(type, entry) {
  state.activeName = '1';
  state.queryParams.entry = entry;
  if (type == 'rec') {
    state.operateType.dialogTitle = '采购收货';
    state.operateType.warehouseType = '入库仓库';
    state.operateType.tabsType = '收货';
  } else {
    state.operateType.dialogTitle = '采购退货';
    state.operateType.warehouseType = '出库仓库';
    state.operateType.tabsType = '退货';
  }
  loadDetail();
  state.dialogVisable = true;
  state.warehouseid = entry.warehouseid;
  if (warehouseRef.value && warehouseRef.value) {
    warehouseRef.value.warehouseid = entry.warehouseid;
  }
}
//结束收货
function stopReceive() {
  ElMessageBox.confirm('请确认是否结束收货？', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    callback: (action) => {
      if (action == 'confirm') {
        const data = {};
        data.recid = null;
        data.remark = null;
        data.amount = 0;
        data.warehouseid = state.warehouseid;
        data.status = '1';
        data.entryid = state.queryParams.entry.id;
        data.ftype = 'in';
        // purchaselistApi.receive(data).then((res) => {
        //   if (res.data) {
        //     ElMessage.success('操作成功');
        //     state.recMap = res.data;
        //     state.queryParams.entry.totalin = res.data.entry.totalin ? res.data.entry.totalin : 0;
        //     state.queryParams.entry.inwhstatus = res.data.entry.inwhstatus;
        //     state.queryParams.entry.auditstatus = res.data.entry.auditstatus;
        //     emit('change');
        //     state.dialogVisable = false;
        //   }
        // });
      }
    }
  });
}
function changeDelete() {
  loadDetail();
  emit('change');
}
function startReceive() {
  const data = {};
  data.recid = null;
  data.remark = null;
  data.amount = 0;
  data.warehouseid = state.warehouseid;
  data.status = '2';
  data.entryid = state.queryParams.entry.id;
  data.ftype = 'in';
  purchaselistApi.receive(data).then((res) => {
    if (res.data) {
      ElMessage.success('操作成功');
      state.recMap = res.data;
      state.queryParams.entry.totalin = res.data.entry.totalin;
      state.queryParams.entry.inwhstatus = res.data.entry.inwhstatus;
      state.queryParams.entry.auditstatus = res.data.entry.auditstatus;
      emit('change');
      //state.dialogVisable=false;
    }
  });
}

defineExpose({
  show
});
</script>
<style>
.myreceiptdailog .el-dialog__footer {
  background: #f5f5f5;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
  text-align: center;
}
.dark .mypaymentdailog .el-dialog__footer {
  background: #1b1b1b;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
  text-align: center;
}
.mypaymentdailog .el-dialog__body {
  padding: 1px 0px;
  background-color: #f5f5f5;
}
</style>
<style scoped="scoped">
.bg-full {
  height: 100%;
}
.m-b-16 {
  margin-bottom: 16px;
}
.record-box {
  padding: 12px;
}
.product-box {
  display: flex;
  margin-bottom: 24px;
}
.product-box .el-image {
  margin-right: 16px;
}
.product-box .name {
  font-size: 12px;
  margin-bottom: 8px;
}
.product-box .sku {
  font-size: 12px;
  color: var(--el-color-blue);
}
.m-t-32 {
  margin-top: 32px;
}
.m-t-16 {
  margin-top: 16px;
}
.img-60 {
  width: 60px;
  height: 60px;
  flex: none;
  margin-right: 8px;
}
</style>
